<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- 使用不同智能机的宽度 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="renderer" content="webkit">
    <title>校花个人集合</title>
    <link rel="stylesheet" media="all" href="css/base.css">
    <link rel="stylesheet" href="css/dian.css"/>
    <!--<script src="js/modernizr.custom.js"></script>-->
    <script src="js/jquery-1.12.3.min.js"></script>
    <style>

    </style>
    <script>
        ;(function(win, doc){
            function change(){
                doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/320+'px';
            }

            if(doc.documentElement.clientWidth>640){
                doc.documentElement.style.fontSize=20*640/320+'px';
            }else{
                change();
            }
            win.addEventListener('resize', change, false);
        })(window, document);

        function GetQueryString(name)
        {
            var search = document.location.search;
            var pattern = new RegExp("[?&]"+name+"\=([^&]+)", "g");
            var matcher = pattern.exec(search);
            var items = null;
            if(null != matcher){
                try{
                    items = decodeURIComponent(decodeURIComponent(matcher[1]));
                }catch(e){
                    try{
                        items = decodeURIComponent(matcher[1]);
                    }catch(e){
                        items = matcher[1];
                    }
                }
            }
            return items;
        }

        function addLike(id){
            $.ajax({
                url: 'http://app.missquq.com/attach/clicks',
                data:{
                    id:id
                },
                jsonp: 'callback',    // cbName
                dataType: 'jsonp', // 使用jsonp
                success: function(json) {
//                    console.log(json);
                }
            });
        }

        $(function(){
            var oBlank=$('.blank');
            var personalId=GetQueryString('personalId');
            $.ajax({
                url: 'http://app.missquq.com/attach/details',
                data:{
                    userId:personalId
                },
                jsonp: 'callback',    // cbName
                dataType: 'jsonp', // 使用jsonp
                success: function(json) {
                    console.log(json);
                    sessionStorage.personalId=json.list[0].ownId;
                    $('.myname p:nth-child(1)').html(json.AuthName+'<img src="img/'+json.sex+'_icons.png" />');
                    $('.myname p:nth-child(2)').text(json.shoolName);
                    $('.myMainText p').text(json.praises);
                    var str=json.thumbnail.substring(0,7);
                    if(str=='http://'){
                        $('.inmyMainPhoto img').attr('src',json.thumbnail);
                    }else{
                        $('.inmyMainPhoto img').attr('src','http://app.missquq.com'+json.thumbnail);
                    }
                    $.each(json.list,function(i){
                        var oDiv=$('<div></div>');
                        oDiv.addClass('rectangle');
                        oDiv.html('<img src="img/rectangle.png" alt=""/>\
                                <div class="singlePhoto">\
                                <div>'+json.list[i].praises+'</div>\
                                </div>\
                                <img src="img/addone.png" class="addOne" alt=""/>\
                                <img src="img/dian/singlelike.png" class="singlelike" alt=""/>');
                        oDiv.insertBefore(oBlank);
                        if(i==(json.list.length-1)){
                            $('.monitor').val('1');
                        }
                    });
                    $.each($('.singlePhoto'),function(i){
                        $('.singlePhoto').eq(i).css({'background':'url("http://app.missquq.com'+json.list[i].thumbnail+'") center','background-size':'cover'}).attr('index',json.list[i].id);
                    });




                    $('.singlelike').one('click',function(){
                        var id=$(this).siblings('div').attr('index');
                        $(this).prev().css('animation','addone 1s linear');
                        addLike(id);
                    });

                    $('.singlePhoto').on('click',function(){
                        window.location.href = "dianpersonal.html?personalId="+sessionStorage.personalId+"&imageId="+$(this).attr('index');
                    });
                },
                complete:function(){
                    var bgHeight=setInterval(function(){
                        if($('.monitor').val()=='1'){
                            var bgH;
                            if($('.mainRectangle').height()>$(document).height()){
                                bgH=$('.mainRectangle').height()+$('.mainRectangle').offset().top;
                            }else{
                                bgH=$(document).height();
                            }
                            $('.bg').css('height',bgH);
                            clearInterval(bgHeight);
                        }
                    },50);
                }
            });



        });
    </script>
</head>
<body>
<div class="container w640" id="main">
    <input type="hidden" class="monitor" value="0"/>
    <div class="bg">
        <!--<img src="img/bg2.jpg"  alt="" class="bg-img"/>-->
        <img src="img/dian/xingAll.png" alt="" class="dianXing"/>
        <img src="img/dian/grouptitle.png" alt="" class="groupTitle"/>
        <div class="myMainPhoto">
            <img src="img/dian/groupMainPhoto.png" alt="" />
            <div class="inmyMainPhoto">
                <img src="" alt=""/>
            </div>
        </div>
        <div class="myMainText">
            <img src="img/dian/groupMainText.png" alt="" />
            <p></p>
        </div>
        <div class="allround2T">
            <a href="paihangbang.html"><img src="img/whiteround2.png" alt=""/></a>
        </div>
        <div class="allround2B">
            <a href="diandiandian.html"><img src="img/janeround3.png" alt=""/></a>
        </div>
        <div class="myname">
            <p><img src="" /></p>
            <p></p>
        </div>
        <div class="mainRectangle">
            <!--<div class="rectangle">-->
                <!--<img src="img/rectangle.png" alt=""/>-->
                <!--<div class="singlePhoto">-->
                    <!--<div>1120</div>-->
                <!--</div>-->
                <!--<img src="img/dian/singlelike.png" alt=""/>-->
            <!--</div>-->
            <!--<div class="rectangle">-->
                <!--<img src="img/rectangle.png" alt=""/>-->
                <!--<div class="singlePhoto">-->
                    <!--<div>1120</div>-->
                <!--</div>-->
                <!--<img src="img/dian/singlelike.png" alt=""/>-->
            <!--</div>-->
            <!--<div class="rectangle">-->
                <!--<img src="img/rectangle.png" alt=""/>-->
                <!--<div class="singlePhoto">-->
                    <!--<div>1120</div>-->
                <!--</div>-->
                <!--<img src="img/dian/singlelike.png" alt=""/>-->
            <!--</div>-->
            <!--<div class="rectangle">-->
                <!--<img src="img/rectangle.png" alt=""/>-->
                <!--<div class="singlePhoto">-->
                    <!--<div>1120</div>-->
                <!--</div>-->
                <!--<img src="img/dian/singlelike.png" alt=""/>-->
            <!--</div>-->
            <div class="blank"></div>
        </div>
    </div>
</div>
</body>
</html>